import { nanoid } from 'nanoid';
import React from 'react'
import "./index.css"

export default function Header({todoList,setTodoList}) {
  //1.输入数据后敲击回车,将数据添加到表单中,绑定键盘按下/抬起事件onKeyUp

  //2,事件函数
  // 2.1我们需要判断输入框里输入的内容不能为空,因为是在当前表单中进行操作,可以使用e.target
  const publishHandle = (e) => {
    // 2.2回车键码是13,如果敲击回车有内容,返回输入内容 trim()是清除前后空格,如果没内容就弹出提示
    // if (e.keyCode ===13){
    //   const publishValue = e.target.value.trim();
    //   if(!publishValue){
    //     return alert('请输入内容')
    //   }
    // }

    // 2.3条件判断的简写
    // 判断是否点击的是回车
    if (e.keyCode !== 13) return;
    // 获取输入的内容判断是否输入为空
    const publishValue = e.target.value.trim()
    if (!publishValue) return alert('请输入内容')


    // 3.添加保单数据.增加的表单数据为一个对象 {id:'001',todo:'唱歌',done:false},
    const newItem = { id: nanoid, todo: publishValue, done: false }
    // 每次增加的数据都有自己的id,这个时候需要用到nanoid获取到唯一对应的id
    // 下载nanoid的包,并引入.App.jsx中对应去修改

    //4.接下来就需要去传值了,目前我要将Header中的数据传给我的兄弟List中
    //4.2调用父组件传递过来的改变todoList的方法 把newItem添加进入,创建新的todo对象
    // 这里的newItem只是对象中的todo值,我们想要拿到整个对象,还需要把父组件中老的todoList传过来,key比较后生成新的数据
    setTodoList([newItem,...todoList])

    //5.另外还有一种方法,如果数据较多较复杂的化可以在父组件中定义一个函数,在子组件调用即可

  }
  return (
    <div className="todo-header">
      <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
